<template>
	<el-dialog
		v-model="isVisible"
		:title="row?.pass ? title[afterMarketingType || 0].pass : title[afterMarketingType || 0].refuse"
		width="600px"
		:before-close="handleClose"
	>
		<!-- <div class="flex-jcenter w-full">
			<el-check-tag class="mb20" v-if="row?.pass && afterMarketingType != 2" checked type="warning">
				OTB退货订单状态：{{ row?.afterMarketing?.otbStatus }}
			</el-check-tag>
		</div> -->
		<el-form ref="formRef" class="address-form" :model="form" :rules="rules" label-width="100px" inline>
			<el-form-item v-if="row?.pass" :label="`${afterMarketingType == 1 ? '换货' : '退款'}说明`" prop="reason">
				<el-input
					type="textarea"
					v-model="form.reason"
					rows="5"
					:maxlength="100"
					:placeholder="`输入${afterMarketingType == 1 ? '换货' : '退款'}说明`"
				/>
			</el-form-item>
			<el-form-item v-else label="拒绝理由" prop="reason">
				<el-input type="textarea" v-model="form.reason" rows="5" :maxlength="100" placeholder="输入拒绝理由" />
			</el-form-item>
			<el-form-item v-if="row?.pass" label="上传附件" prop="attachment">
				<uploadImage v-model:file-list="form.attachment" :limit="1" :fileSize="1">
					<template #tip> 请上传审批完成附件图片 </template>
				</uploadImage>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" v-debounce="submit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="tsx">
import { FormRules, ElMessage } from 'element-plus';
import { ref, reactive, watch, computed } from 'vue';
import { fetchRefundAfterSale } from '/@/api/order';
import uploadImage from '/@/components/upload/image.vue';

const props = defineProps({
	// 列表内容
	visible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {
			return {
				afterMarketing: {},
			};
		},
	},
});

const emit = defineEmits(['handleClose']);

const isVisible = ref(false);

const formRef = ref();
const form = ref<any>({});

const title = [
	{
		pass: '同意退款',
		refuse: '拒绝退款并填写理由',
	},
	{
		pass: '同意换货',
		refuse: '拒绝换货并填写理由',
	},
	{
		pass: '同意退款',
		refuse: '拒绝退款并填写理由',
	},
];

const afterMarketingType = computed(() => {
	return props.row?.afterMarketingType || props.row?.afterMarketing?.afterMarketingType;
});

//校验规则
const rules = reactive<FormRules<any>>({
	reason: [
		{
			required: true,
			trigger: 'blur',
			message: props.row?.pass ? `输入${afterMarketingType.value == 1 ? '换货' : '退款'}说明不能为空` : '拒绝理由不能为空',
		},
	],
	attachment: [{ required: true, trigger: ['blur', 'change'], message: '附件不能为空' }],
});

watch(
	() => props.visible,
	(val) => {
		isVisible.value = val;
	},
	{
		immediate: true,
	}
);

const submit = async () => {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			const res = await fetchRefundAfterSale({
				...form.value,
				id: props.row?.afterMarketing?.id || props.row?.id,
				pass: props.row?.pass,
				attachment: form.value.attachment ? form.value.attachment.map((v: any) => v.url).join(',') : '',
			});
			if (res.code == 200) {
				ElMessage.success('操作成功');
				handleClose(true);
			} else {
				ElMessage.error(res.msg);
			}
		}
	});
};

const handleClose = (success?: boolean) => {
	form.value = {};
	formRef.value.resetFields();
	emit('handleClose', success === true);
};
</script>

<style lang="scss" scoped>
.address-form {
	.el-form-item {
		width: 90%;
		.el-input-number,
		.el-cascader {
			width: 100%;
		}
	}
}
</style>
